<template>
  <div class="block">
    <el-timeline>
      <el-timeline-item v-for="(item, index) in timeline" :key="index" :timestamp="item.timestamp" placement="top">
        <el-card>
          <h4>{{ item.title }}</h4>
          <p>{{ item.content }}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>

import state from '../../../store/modules/user'

export default {
  data() {
    return {
      username: ' ',

      timeline: [
        {

          timestamp: '2024/6/3',
          title: 'BaiZenan 登录',
          content: 'BaiZenan 于 2024/6/3 19:07 登录'
        },
        {
          timestamp: '2024/6/3',
          title: 'BaiZenan 登录',
          content: 'BaiZenan 于 2024/6/3 12:25 登录'
        },
        {
          timestamp: '2024/6/3',
          title: 'BaiZenan 登录',
          content: 'BaiZenan 于 2024/6/3 09:33 登录'
        },
        {
          timestamp: '2024/6/2',
          title: 'BaiZenan 登录',
          content: 'BaiZenan 于 2024/6/2 20:46 登录'
        },
        {

          timestamp: '2024/6/2',
          title: 'BaiZenan 登录',
          content: 'BaiZenan 于 2024/5/6 19:10 登录'
        }
      ]
    }
  },
  created() {
    // console.log(state.timeline)
    this.username = state.state.name
    console.log(this.username)
    const currentTimestamp = this.getCurrentTimestamp()
    const title = this.username + ' 登录'
    const content = this.username + ' 于 ' + currentTimestamp + ' 登录'
    // console.log(title)
    // console.log(content)
    this.addTimelineItem({ name: this.username, title, content })

    // this.addTimelineItem(state.state.timeline)
  },
  beforeDestroy() {

    // console.log(state.timeline)
    // this.username = state.state.name
    // const currentTimestamp = this.getCurrentTimestamp()
    // const title = this.username + ' 登录'
    // const content = this.username + " 于 " + currentTimestamp + " 登录"
    // // console.log(title)
    // // console.log(content)
    // this.addTimelineItem({username, title, content})
  },
  methods: {
    addTimelineItem(item) {
      console.log('Event received:', item) // 打印接收到的事件信息
      this.timeline.unshift(item) // 插入到数组的最前面
    },

    getCurrentTimestamp() {
      const now = new Date()
      const year = now.getFullYear()
      const month = String(now.getMonth() + 1).padStart(2, '0')
      const day = String(now.getDate()).padStart(2, '0')
      const hours = String(now.getHours()).padStart(2, '0')
      const minutes = String(now.getMinutes()).padStart(2, '0')
      return `${year}/${month}/${day} ${hours}:${minutes}`
    }
  }
}
</script>
